⭐任務說明

上一個任務中學習到可以建立不同的元件，本次任務將學習如何拆分並使用元件

拆解元件

在上一個任務的範例中，我們都把元件都寫在同一個 App.js 檔案中，程式碼如下

function MyButton() {
  return (
    <button>
      karakamin 點我！這是按鈕啦！
    </button>
  );
}

export default function App() {
  return (
    <div>
      <h1>React 大秘境</h1>
      <h2>DAY 04</h2>
      <h3>HEY! karakamin 你好！</h3>
      <MyButton />
    </div>
  );
}

😾後續也會根據使用上的不同，而會拆解成不同的檔案，那我們現在可以這麼做

• 把原本的頁面樣式獨立到 Page.js
  

• 在 App.js 改成如下
  

• 結果如下
  

😾登登！我們這邊做了什麼事？來～來～來我們一一拆解

• Page.js
  • MyButton 元件就只在這一份文件中使用
  • 會將 Page 元件當作 export default （預設匯出），而 export default 每個檔案中只會有一個
• App.js
  • 把 Page.js 以 Page 這個名稱 import 進來
  • 將根元件以 export default （預設匯出）方式

冒險者！經過上面的解說之後，對於 import 和 export 應該有稍微理解一點了吧！😸
先消化一下，我們下一個任務見！